$(document).ready - Code Metrics - Inspection of "postMessage refactor" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#1708)

by Aristeides

created 2018-06-23 13:23 UTC

$(document).ready A

↳ Parent: $(document).ready

Complexity

Conditions	1
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
c	1
b	0
f	0
dl	0
loc	16
rs	9.4285
cc	1
nc	2
nop	1

/* global kirkiPostMessageFields, WebFont */
var kirkiPostMessage = {
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

	/**
	 * The fields.
	 *
	 * @since 3.0.26
	 */
	fields: {},

	/**
	 * A collection of methods for the <style> tags.
	 *
	 * @since 3.0.26
	 */
	styleTag: {

		/**
		 * Add a <style> tag in <head> if it doesn't already exist.
		 *
		 * @since 3.0.26
		 * @param {string} id - The field-ID.
		 * @returns {void}
		 */
		add: function( id ) {
			if ( null === document.getElementById( 'kirki-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
				jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
			}
		},

		/**
		 * Add a <style> tag in <head> if it doesn't already exist,
		 * by calling the this.add method, and then add styles inside it.
		 *
		 * @since 3.0.26
		 * @param {string} id - The field-ID.
		 * @param {string} styles - The styles to add.
		 * @returns {void}
		 */
		addData: function( id, styles ) {
			kirkiPostMessage.styleTag.add( id );
			jQuery( '#kirki-postmessage-' + id ).text( styles );
		}
	},

	/**
	 * Common utilities.
	 *
	 * @since 3.0.26
	 */
	util: {

		/**
		 * Processes the value and applies any replacements and/or additions.
		 *
		 * @since 3.0.26
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.

		 * @returns {string}
		 */
		processValue: function( output, value ) {
			var self     = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				settings = window.parent.wp.customize.get();

			if ( 'string' !== typeof value ) {
				_.each( value, function( subValue, key ) {
					value[ key ] = self.processValue( output, subValue );
				} );
				return value;
			}
			output = _.defaults( output, {

				prefix: '',
				units: '',
				suffix: '',
				value_pattern: '$',
				pattern_replace: {}
			} );

			value = output.value_pattern.replace( new RegExp( '\\$', 'g' ), value );

			_.each( output.pattern_replace, function( id, placeholder ) {
				if ( ! _.isUndefined( settings[ id ] ) ) {
					value = value.replace( placeholder, settings[ id ] );

				}
			} );
			return output.prefix + value + output.units + output.suffix;
		},

		/**
		 * Make sure urls are properly formatted for background-image properties.
		 *
		 * @since 3.0.26
		 * @param {string} url - The URL.
		 * @returns {string}
		 */
		backgroundImageValue: function( url ) {
			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
		}
	},

	/**
	 * A collection of utilities for CSS generation.
	 *
	 * @since 3.0.26
	 */
	css: {

		/**
		 * Generates the CSS from the output (js_vars) parameter.
		 *
		 * @since 3.0.26
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.
		 * @returns {string}
		 */
		fromOutput: function( output, value, controlType ) {
			var styles      = '',
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				kirkiParent = window.parent.kirki,
				googleFont  = '';

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}
			switch ( controlType ) {
				case 'kirki-typography':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
					} );
					styles += '}';

					// Check if this is a googlefont so that we may load it.
					if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {

						// Calculate the googlefont params.
						googleFont = value['font-family'].replace( /\"/g, '&quot;' );
						if ( value.variant ) {
							if ( 'regular' === value.variant ) {
								googleFont += ':400';
							} else if ( 'italic' === value.variant ) {
								googleFont += ':400i';
							} else {
								googleFont += ':' + value.variant;
							}
						}
						googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai';
						WebFont.load( {
							google: {
								families: [ googleFont ]
							}
						} );
					}
					break;
				case 'kirki-background':
				case 'kirki-dimensions':
				case 'kirki-multicolor':
				case 'kirki-sortable':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						if ( 'background-image' === key ) {
							val = kirkiPostMessage.util.backgroundImageValue( val );

						}

						// Mostly used for padding, margin & position properties.
						if ( output.property && '' !== output.property && ( 'top' === key || 'bottom' === key || 'left' === key || 'right' === key ) ) {
							styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
						} else {
							styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
						}
					} );
					styles += '}';
					break;
				default:
					if ( 'kirki-image' === controlType ) {
						value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );

					}
					styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
					break;
			}
			return styles;
		}
	},

	/**
	 * A collection of utilities to change the HTML in the document.
	 *
	 * @since 3.0.26
	 */
	html: {

		/**
		 * Modifies the HTML from the output (js_vars) parameter.
		 *
		 * @since 3.0.26
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}

			if ( _.isObject( value ) || _.isArray( value ) ) {
				if ( ! output.choice ) {
					return;
				}
				_.each( value, function( val, key ) {
					if ( output.choice && key !== output.choice ) {
						return;
					}
					value = val;

				} );
			}
			value = kirkiPostMessage.util.processValue( output, value );

			if ( output.attr ) {
				jQuery( output.element ).attr( output.attr, value );
			} else {
				jQuery( output.element ).html( value );
			}
		}
	},

	/**
	 * A collection of utilities to allow toggling a CSS class.
	 *
	 * @since 3.0.26
	 */
	toggleClass: {

		/**
		 * Toggles a CSS class from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {
			if ( 'undefined' === typeof output.class || 'undefined' === typeof output.value ) {
				return;
			}
			if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
				jQuery( output.element ).addClass( output.class );
			} else {
				jQuery( output.element ).removeClass( output.class );
			}
		}
	}
};

jQuery( document ).ready( function() {

	_.each( kirkiPostMessageFields, function( field ) {
		wp.customize( field.settings, function( value ) {
			value.bind( function( newVal ) {
				var styles = '';
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				_.each( field.js_vars, function( output ) {
					if ( ! output.function || 'undefined' === typeof kirkiPostMessage[ output.function ] ) {
						output.function = 'css';
					}
					if ( 'css' === output.function ) {
						styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
					} else {
						kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
					}
				} );
				kirkiPostMessage.styleTag.addData( field.settings, styles );
			} );
		} );
	} );
} );


1			/* global kirkiPostMessageFields, WebFont */
2			var kirkiPostMessage = {
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
3
4			/**
5			* The fields.
6			*
7			* @since 3.0.26
8			*/
9			fields: {},
10
11			/**
12			* A collection of methods for the <style> tags.
13			*
14			* @since 3.0.26
15			*/
16			styleTag: {
17
18			/**
19			* Add a <style> tag in <head> if it doesn't already exist.
20			*
21			* @since 3.0.26
22			* @param {string} id - The field-ID.
23			* @returns {void}
24			*/
25			add: function( id ) {
26			if ( null === document.getElementById( 'kirki-postmessage-' + id ) \|\| 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
27			jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
28			}
29			},
30
31			/**
32			* Add a <style> tag in <head> if it doesn't already exist,
33			* by calling the this.add method, and then add styles inside it.
34			*
35			* @since 3.0.26
36			* @param {string} id - The field-ID.
37			* @param {string} styles - The styles to add.
38			* @returns {void}
39			*/
40			addData: function( id, styles ) {
41			kirkiPostMessage.styleTag.add( id );
42			jQuery( '#kirki-postmessage-' + id ).text( styles );
43			}
44			},
45
46			/**
47			* Common utilities.
48			*
49			* @since 3.0.26
50			*/
51			util: {
52
53			/**
54			* Processes the value and applies any replacements and/or additions.
55			*
56			* @since 3.0.26
57			* @param {Object} output - The output (js_vars) argument.
58			* @param {mixed} value - The value.
59			* @param {string} controlType - The control-type.
			0 ignored issues – show Documentation introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report The parameter `controlType` does not exist. Did you maybe forget to remove this comment? Loading history...
60			* @returns {string}
61			*/
62			processValue: function( output, value ) {
63			var self = this,
			0 ignored issues – show Coding Style introduced 2018-03-17 11:28 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
64			settings = window.parent.wp.customize.get();
65
66			if ( 'string' !== typeof value ) {
67			_.each( value, function( subValue, key ) {
68			value[ key ] = self.processValue( output, subValue );
69			} );
70			return value;
71			}
72			output = _.defaults( output, {
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `output`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
73			prefix: '',
74			units: '',
75			suffix: '',
76			value_pattern: '$',
77			pattern_replace: {}
78			} );
79
80			value = output.value_pattern.replace( new RegExp( '\\$', 'g' ), value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2018-03-17 11:28 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
81			_.each( output.pattern_replace, function( id, placeholder ) {
82			if ( ! _.isUndefined( settings[ id ] ) ) {
83			value = value.replace( placeholder, settings[ id ] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
84			}
85			} );
86			return output.prefix + value + output.units + output.suffix;
87			},
88
89			/**
90			* Make sure urls are properly formatted for background-image properties.
91			*
92			* @since 3.0.26
93			* @param {string} url - The URL.
94			* @returns {string}
95			*/
96			backgroundImageValue: function( url ) {
97			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
98			}
99			},
100
101			/**
102			* A collection of utilities for CSS generation.
103			*
104			* @since 3.0.26
105			*/
106			css: {
107
108			/**
109			* Generates the CSS from the output (js_vars) parameter.
110			*
111			* @since 3.0.26
112			* @param {Object} output - The output (js_vars) argument.
113			* @param {mixed} value - The value.
114			* @param {string} controlType - The control-type.
115			* @returns {string}
116			*/
117			fromOutput: function( output, value, controlType ) {
118			var styles = '',
			0 ignored issues – show Coding Style introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
119			kirkiParent = window.parent.kirki,
120			googleFont = '';
121
122			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
123			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
124			}
125			switch ( controlType ) {
126			case 'kirki-typography':
127			styles += output.element + '{';
128			_.each( value, function( val, key ) {
129			if ( output.choice && key !== output.choice ) {
130			return;
131			}
132			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
133			} );
134			styles += '}';
135
136			// Check if this is a googlefont so that we may load it.
137			if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {
138
139			// Calculate the googlefont params.
140			googleFont = value['font-family'].replace( /\"/g, '"' );
141			if ( value.variant ) {
142			if ( 'regular' === value.variant ) {
143			googleFont += ':400';
144			} else if ( 'italic' === value.variant ) {
145			googleFont += ':400i';
146			} else {
147			googleFont += ':' + value.variant;
148			}
149			}
150			googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai';
151			WebFont.load( {
152			google: {
153			families: [ googleFont ]
154			}
155			} );
156			}
157			break;
158			case 'kirki-background':
159			case 'kirki-dimensions':
160			case 'kirki-multicolor':
161			case 'kirki-sortable':
162			styles += output.element + '{';
163			_.each( value, function( val, key ) {
164			if ( output.choice && key !== output.choice ) {
165			return;
166			}
167			if ( 'background-image' === key ) {
168			val = kirkiPostMessage.util.backgroundImageValue( val );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `val`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
169			}
170
171			// Mostly used for padding, margin & position properties.
172			if ( output.property && '' !== output.property && ( 'top' === key \|\| 'bottom' === key \|\| 'left' === key \|\| 'right' === key ) ) {
173			styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
174			} else {
175			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
176			}
177			} );
178			styles += '}';
179			break;
180			default:
181			if ( 'kirki-image' === controlType ) {
182			value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
183			}
184			styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
185			break;
186			}
187			return styles;
188			}
189			},
190
191			/**
192			* A collection of utilities to change the HTML in the document.
193			*
194			* @since 3.0.26
195			*/
196			html: {
197
198			/**
199			* Modifies the HTML from the output (js_vars) parameter.
200			*
201			* @since 3.0.26
202			* @param {Object} output - The output (js_vars) argument.
203			* @param {mixed} value - The value.
204			* @returns {string}
205			*/
206			fromOutput: function( output, value ) {
207
208			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
209			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
210			}
211
212			if ( _.isObject( value ) \|\| _.isArray( value ) ) {
213			if ( ! output.choice ) {
214			return;
215			}
216			_.each( value, function( val, key ) {
217			if ( output.choice && key !== output.choice ) {
218			return;
219			}
220			value = val;
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
221			} );
222			}
223			value = kirkiPostMessage.util.processValue( output, value );
224
225			if ( output.attr ) {
226			jQuery( output.element ).attr( output.attr, value );
227			} else {
228			jQuery( output.element ).html( value );
229			}
230			}
231			},
232
233			/**
234			* A collection of utilities to allow toggling a CSS class.
235			*
236			* @since 3.0.26
237			*/
238			toggleClass: {
239
240			/**
241			* Toggles a CSS class from the output (js_vars) parameter.
242			*
243			* @since 3.0.21
244			* @param {Object} output - The output (js_vars) argument.
245			* @param {mixed} value - The value.
246			* @returns {string}
247			*/
248			fromOutput: function( output, value ) {
249			if ( 'undefined' === typeof output.class \|\| 'undefined' === typeof output.value ) {
250			return;
251			}
252			if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
253			jQuery( output.element ).addClass( output.class );
254			} else {
255			jQuery( output.element ).removeClass( output.class );
256			}
257			}
258			}
259			};
260
261			jQuery( document ).ready( function() {
262
263			_.each( kirkiPostMessageFields, function( field ) {
264			wp.customize( field.settings, function( value ) {
265			value.bind( function( newVal ) {
266			var styles = '';
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
267			_.each( field.js_vars, function( output ) {
268			if ( ! output.function \|\| 'undefined' === typeof kirkiPostMessage[ output.function ] ) {
269			output.function = 'css';
270			}
271			if ( 'css' === output.function ) {
272			styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
273			} else {
274			kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
275			}
276			} );
277			kirkiPostMessage.styleTag.addData( field.settings, styles );
278			} );
279			} );
280			} );
281			} );
282

aristath / kirki

Pull Request — develop (#1708)

$(document).ready A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like